<template>
	<view>
		<u-sticky offset-top="0">
			<navBarView title="电子归档详情" :statusBarHeight="statusBarHeight"></navBarView>
		</u-sticky>
		
		<view v-if="criminalItemIndex==0">
			<view class="flex-row-space-between">
				<view class="dsr">
					案件类型
				</view>
				<view class="dsr2">
					刑事辩护
				</view>
			</view>
			<view class="dsr">
				当事人
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name">
					姓名
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					性别
				</view>
				<view class="flex-row-flex-start" style="width: 206rpx;">
					<view class="flex-row-flex-start">
						<image class="sexIcon"></image>
						<view class="sexText">男</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 60rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">女</view>
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					身份证号
				</view>
				<input v-model="value" class="inputView" placeholder="选填"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					联系方式
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					身份证照片
				</view>
				<view class=""></view>
			</view>
			<view class="contentView2 flex-row-space-between">
				<view class="flex-column-center" style="width: 336rpx;">
					<image class="frontbackIcon" src="/static/home/register_1.png"></image>
					<view class="frontbackText">身份证正面</view>
				</view>
				<view class="flex-column-center" style="width: 336rpx;">
					<image class="frontbackIcon" src="/static/home/register_1.png"></image>
					<view class="frontbackText">身份证反面</view>
				</view>
			</view>
			<view class="dsr">
				对方当事人
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name">
					姓名
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					性别
				</view>
				<view class="flex-row-flex-start" style="width: 206rpx;">
					<view class="flex-row-flex-start">
						<image class="sexIcon"></image>
						<view class="sexText">男</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 60rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">女</view>
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					身份证号
				</view>
				<input v-model="value" class="inputView" placeholder="选填"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					联系方式
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="dsr">
				第三人
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="flex-row-flex-start">
					<view class="name2">
						姓名
					</view>
					<input v-model="value" class="inputView2" placeholder="请输入"/>
				</view>
				<view class="flex-row-flex-end">
					<view class="flex-row-flex-start" style="margin-left: 40rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">单位</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 40rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">个人</view>
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					性别
				</view>
				<view class="flex-row-flex-start" style="width: 206rpx;">
					<view class="flex-row-flex-start">
						<image class="sexIcon"></image>
						<view class="sexText">男</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 60rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">女</view>
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					身份证号
				</view>
				<input v-model="value" class="inputView" placeholder="选填"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					联系方式
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="dsr">
				第三人
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="flex-row-flex-start">
					<view class="name2">
						姓名
					</view>
					<input v-model="value" class="inputView2" placeholder="请输入"/>
				</view>
				<view class="flex-row-flex-end">
					<view class="flex-row-flex-start" style="margin-left: 40rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">单位</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 40rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">个人</view>
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					统一社会信用代码
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					联系方式
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="dsr">
				法定代理人
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="flex-row-flex-start">
					<view class="name2">
						姓名
					</view>
					<input v-model="value" class="inputView2" placeholder="请输入"/>
				</view>
				<view class="flex-row-flex-end">
					<view class="flex-row-flex-start">
						<image class="sexIcon"></image>
						<view class="sexText">配偶</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 40rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">父母</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 40rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">子女</view>
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					性别
				</view>
				<view class="flex-row-flex-start" style="width: 206rpx;">
					<view class="flex-row-flex-start">
						<image class="sexIcon"></image>
						<view class="sexText">男</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 60rpx;">
						<image class="sexIcon"></image>
						<view class="sexText">女</view>
					</view>
				</view>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					身份证号
				</view>
				<input v-model="value" class="inputView" placeholder="选填"/>
			</view>
			<view class="dsr">
				单位信息
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name">
					单位名称
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name">
					法人/负责人
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					统一社会信用代码
				</view>
				<input v-model="value" class="inputView" placeholder="选填"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					联系方式
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					营业执照/许可证
				</view>
				<view class=""></view>
			</view>
			<view class="contentView2 flex-row-flex-start">
				<view class="flex-column-center" style="width: 336rpx;">
					<image class="frontbackIcon" src="/static/home/register_1.png"></image>
				</view>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					法人/负责人身份证
				</view>
				<view class=""></view>
			</view>
			<view class="contentView2 flex-row-space-between">
				<view class="flex-column-center" style="width: 336rpx;">
					<image class="frontbackIcon" src="/static/home/register_1.png"></image>
					<view class="frontbackText">身份证正面</view>
				</view>
				<view class="flex-column-center" style="width: 336rpx;">
					<image class="frontbackIcon" src="/static/home/register_1.png"></image>
					<view class="frontbackText">身份证反面</view>
				</view>
			</view>
			<view class="dsr">
				对方单位信息
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name">
					单位名称
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 20rpx;">
				<view class="name">
					法人/负责人
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					统一社会信用代码
				</view>
				<input v-model="value" class="inputView" placeholder="选填"/>
			</view>
			<view class="contentView flex-row-space-between">
				<view class="name">
					联系方式
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view style="width: 750rpx;height: 30rpx;background: #FAF7F8;"></view>
			
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name">
					案由
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name">
					是否
				</view>
				<view class="flex-row-flex-end">
					<input v-model="value" class="inputView" disabled="true" placeholder="请选择"/>
					<image src="/static/my/mine_blackarrow.png" style="width: 32rpx;height: 32rpx;"></image>
				</view>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="flex-row-flex-start">
					<view class="name3">
						受案机关
					</view>
					<view class="flex-row-flex-start">
						<view class="">
							请选择
						</view>
						<image src="/static/my/mine_blackarrow.png" style="width: 32rpx;height: 32rpx;"></image>
					</view>
				</view>
				<input v-model="value" class="inputView3" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name">
					律师费金额<text style="font-family: DIN, DIN;font-weight: 500;font-size: 36rpx;color: #FF4C4C;margin-left: 30rpx;">￥:</text>
				</view>
				<input v-model="value" class="inputView4" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name">
					律师费支付方式
				</view>
				<input v-model="value" class="inputView" placeholder="请输入"/>
			</view>
			<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name">
					简要重点案情描述
				</view>
				<view class=""></view>
			</view>
			<u--textarea count maxlength="50" v-model="value1" placeholder="请输入内容" ></u--textarea>
			
			<view class="documentItem flex-row-space-between" v-for="(item,index) in documentList" :key="index">
				<view class="documentItem1">
					{{item}}
				</view>
				<view class="documentItem2">
					查看
				</view>
			</view>
			
			<!-- <view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
				<view class="name">
					生成
				</view>
				<view class=""></view>
			</view>
			<view class="createView">
				<view class="createItem" v-for="(item,index) in createList" :key="index">
					{{item}}
				</view>
			</view> -->
			
			
			
		</view>
		
		<view style="height: 190rpx;"></view>
		<view class="fixed-bottom flex-row-center" style="height: 180rpx;background-color: white;">
			<view @click="loginMobile()" class="saveButton">
				下载
			</view>
			<view @click="loginMobile()" class="loginButton">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		
		onShow() {
			let sysInfo = uni.getSystemInfoSync()
			this.statusBarHeight = sysInfo.statusBarHeight; // 状态栏高度
			this.criminalTypeViewTopHeight = 88+15; // case tyep 距离顶部高度
		},
		data() {
			return {
				statusBarHeight: '',// 状态栏高度
				criminalTypeViewTopHeight:'',
				
				criminalItemIndex:0,//刑事辩护1  刑事自述2   刑事附民3
				
				createList:['收案审批表','电签委托合同','风险告知书','委托书','接待笔录','空白诉状','空白申请书'],
				
				documentList:['收案审批表','电签委托合同','风险告知书','委托书','接待笔录','空白诉状','空白申请书','电签委托合同'],
				
				value1:'',//简要重点案情描述
				
			}
		},
		methods: {
			criminalTypeItemClick(index){
				this.criminalItemIndex = index
			}
		}
	}
</script>

<style>
	.documentItem1{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		margin-left: 34rpx;
	}
	.documentItem2{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #EB2B3B;
		margin-right: 44rpx;
	}
	.documentItem{
		margin-top: 20rpx;
		margin-left: 24rpx;
		width: 702rpx;
		height: 84rpx;
		background: rgba(235,43,59,0.05);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
	.saveButton{
		width: 342rpx;
		height: 90rpx;
		border: 2rpx solid #E93548;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #E93548;
		line-height: 90rpx;
		text-align: center;
	}
	.loginButton {
		margin-left: 18rpx;
		width: 342rpx;
		height: 90rpx;
		background: linear-gradient( to bottom, #E93548 0%, #F35B43 100%);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(235,43,59,0.4);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
	}
	.createItem{
		margin-left: 20rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		height: 80rpx;
		border-radius: 10rpx;
		border: 3rpx solid rgba(233, 53, 72, 1);
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #EB2B3B;
		line-height: 80rpx;
		text-align: center;
	}
	.createView{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: space-between;
		margin-left: 2rpx;
		margin-top: 20rpx;
	}
	::v-deep.u-textarea {
		margin-left: 24rpx;
		width: 666rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
	.frontbackIcon{
		width: 336rpx;
		height: 200rpx;
	}
	.frontbackText{
		margin-top: 18rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}
	.sexIcon{
		width: 36rpx;
		height: 36rpx;
		background-color: #E93548;
	}
	.sexText{
		margin-left: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.inputView{
		width: 440rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView2{
		width: 160rpx;
		margin-left: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: left;
	}
	.inputView3{
		width: 200rpx;
		margin-left: 88rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView4{
		width: 456rpx;
		margin-left: 88rpx;
		font-family: DIN, DIN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FF4C4C;
		text-align: left;
	}
	.name{
		width: 250rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name2{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.name3{
		width: 180rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.contentView{
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.contentView2{
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
	}
	.dsr{
		margin-left: 24rpx;
		margin-top: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	.dsr2{
		margin-right: 24rpx;
		margin-top: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}
	.criminalTypeItem{
		margin-left: 1rpx;
		width: 232rpx;
		height: 74rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 74rpx;
		text-align: center;
	}
	.criminalTypeView{
		margin-top: 30rpx;
		margin-left: 24rpx;
		width: 702rpx;
		height: 80rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		background: linear-gradient( to bottom, #E93548 0%, #F35B43 100%);
	}

</style>
